<template>
	<view class="" @click="showTopRight=false;">
		<u-navbar titleStyle="font-size:40rpx;color:#333" :placeholder='true' title="我的评价" :autoBack="true">
			<view  slot="right">
				<view  @click.stop="showTopRight=!showTopRight">
					<u-icon name="more-dot-fill" style='margin-left: 20rpx;'></u-icon>
				</view>
				<TopRight :showTopRight='showTopRight'/>
			</view>
		</u-navbar>
		<view style="background-color: #fff;">
			<!-- <u-sticky offsetTop='10rpx'> -->
				<u-tabs :list="list1" @click="titleClick" :activeStyle="{color:'#DD2131', }" :scrollable='false'
					lineWidth='80rpx'
					:itemStyle="{color: '#333', fontSize:'32rpx',lineHeight:'80rpx',width:'50%',textalign:'center'}"
					lineColor="#DD2131">
				</u-tabs>
			<!-- </u-sticky> -->
		</view>
		<view class="padding32">
			<!-- 待评价 -->
			<view class="whiteBox mb32" v-if="type==1" v-for='(item,index) in waitList' :key="index">
				<view class="" @click="$my.go(item.store_type==1?`/myPackageA/goodsAndFacton/store?store_id=${item.store_id}` : `/myPackageA/goodsAndFacton/store?store_id=${item.store_id}`)">
					{{item.store_name}}
				</view>
				<view class="mt24 flex" v-for="(itemm,indexx) in item.orderProduct " :key="indexx" @click="$my.go('/myPackageA/goodsAndFacton/goodsDetails?id='+itemm.product_id)">
					<view style="width: 160rpx;margin-right: 20rpx;">
						<u-image :src="itemm.image" :lazy-load="true" height="160rpx" width="160rpx" radius='10rpx'
							style='margin-right: 20rpx;'>
						</u-image>
					</view>
					<view style="flex: 1;">
						<view class="elipes2">
							{{itemm.goods_name}}
						</view>
						<view class=" fontS24 flex" style="margin-top: 18rpx;">
							<view class="co9">
								型号:{{itemm.details}}
							</view>
							<view class="co3" style="margin-left: 30rpx;">
								数量:x{{itemm.product_num}}套
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="flex" style="justify-content: flex-end;">
					<view class="btnClick1 "
						@click="$my.go('/pages/my/more/evaluation/comment?sub_order_id='+item.sub_order_id)">
						评价
					</view>
				</view> -->
			</view>

			<!-- 已评价 -->
			<view class="whiteBox mb32" v-if="type==2" v-for="(item,index) in beforList" :key="index">
				<view class="" @click="$my.go(item.store_type==1?`/myPackageA/goodsAndFacton/store?store_id=${item.store_id}` : `/myPackageA/goodsAndFacton/store?store_id=${item.store_id}`)">
					{{item.store_name}}
				</view>
				<view class="" v-for="(itemm,indexx) in item.commentDetails" :key="indexx"  @click="$my.go('/myPackageA/goodsAndFacton/goodsDetails?id='+itemm.product_id)">
					<view class="mt24 flex">
						<view style="width: 160rpx;margin-right: 20rpx;">
							<u-image :src="itemm.orderProduct.image" :lazy-load="true" height="160rpx" width="160rpx"
								radius='10rpx' style='margin-right: 20rpx;'>
							</u-image>
						</view>
						<view style="flex: 1;">
							<view class="elipes2">
								{{itemm.orderProduct.goods_name}}
							</view>
							<view class="co9 fontS24" style="margin-top: 18rpx;">
								型号:
								<template v-for="(itemdtl,indextl) in itemm.orderProduct.details">
									{{itemdtl}}
								</template>
							</view>
						</view>
					</view>
					<view class="flex mt24">
						<view class="">
							相符描述：
						</view>
						<u-rate count="5" v-model="itemm.start"  :readonly='true'
							activeColor='#DD2131' inactiveColor='#999' size='36rpx'>
						</u-rate>
					</view>
					<view class="mt24"> 
						评价：{{itemm.comment_text }}
					</view>
					<scroll-view scroll-x="true">
						<view class="flex" style="flex-wrap: nowrap;">
							<u-image :src="itempic" :lazy-load="true" height="160rpx" width="160rpx" radius='10rpx'
								style='margin: 8rpx 16rpx 20rpx 0rpx;' v-for="(itempic,indexpic) in itemm.image">
							</u-image>
						</view>
					</scroll-view>
					<view class="lisTImeBox  fontS24 co9 ">
						<view class="flexJBC" style="margin-top: 15rpx;">
							<view>
								{{itemm.create_time.slice(0,11)}}
							</view>
							<view class="" v-if="itemm.status==0">
								匿名评价
							</view>
							<view class="flex">
								<u-image :src="item.member.avatar" :lazy-load="true" height="32rpx" width="32rpx"
									radius='16rpx' style='margin: 0rpx 8rpx 0rpx 0rpx;'>
								</u-image>
								<view class="" v-if="itemm.status==1">
									{{item.member.nickname}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-empty width='162px' height="140px" :show='((waitList.length==0 && type==1) || (beforList.length==0 && type==2)) && !pageLoading '></u-empty>
		<!-- 加载页 -->
		<u-loading-page loading-text="loading..." v-if='pageLoading' :loading='true' bgColor='#f5f5f5'></u-loading-page>
	</view>
</template>

<script>
	import TopRight from '@/componentes/topRight.vue'
	export default {
		components: {
			TopRight
		},
		data() {
			return {
				showTopRight:false,
				pageLoading:true,
				type: 1, //1是待评价   2是已评价
				page: 1, //待评价
				page2: 1, //已评价
				limit: 10,
				list1: [{
					name: '待评价',
				}, {
					name: '已评价',
				}, ],
				waitList: [], //待评价列表
				beforList: [] //已评价列表
			}
		},
		methods: {
			titleClick(item) {
				this.type = item.index + 1
				if (this.type == 1) {
					this.page = 1;
					this.waitList = [];
					this.getWaitList()
				} else {
					this.page2 = 1;
					this.beforList = [];
					this.getBeforList()
				}
			},
			getWaitList() { //待评价
				this.$my.post('/index/orderComment/selectToEvaluateList', {
					page: this.page,
					limit: this.limit
				}).then(res => {
					this.pageLoading=false;
					if (res.code == 200) {
						uni.pageScrollTo({ 
								scrollTop: 0, duration: 100 
						});
						this.waitList.push(...res.data.data)
					}
				})
			},
			getBeforList() {
				this.$my.post('/index/orderComment/selectHaveEvaluation', {
					page: this.page2,
					limit: this.limit
				}).then(res => {
					this.pageLoading=false;
					if (res.code == 200) {
						uni.pageScrollTo({
							scrollTop: 0, duration: 100 
						});
						this.beforList.push(...res.data.data)
					}
				})
			}
		},
		onReachBottom() {
			if (this.type == 1) {
				this.page++;
				this.getWaitList()
			} else {
				this.page2++;
				this.getBeforList()
			}
		},
		onLoad() {
			this.getWaitList()
			// this.getBeforList()
		}
	}
</script>

<style lang="scss" scoped>
	.lisTImeBox {
		border-top: 1rpx solid rgba(141, 141, 141, 0.12);
	}

	// /deep/ .u-tabs__wrapper__nav {
	// 	// display: flex;
	// 	// justify-content: space-between;
	// }
	// /deep/ .u-tabs__wrapper__nav__line{
	// 	margin-left: 50%;
	// }
</style>
